import React from "react";
import { Box } from "$components";
import ReactECharts from "echarts-for-react";
import { connect } from "react-redux";

import ThreeDBarChart from "./charts/bar";
import { useFsRequest } from "$utils";
function WaterQualityCounting() {
  const xData = ["08:00", "10:00", "12:00", "14:00", "16:00"];
  const waterLevel = [1.48, 1.52, 1.5, 1.49, 1.53]; // 单位：米
  const waterTemp = [18.2, 18.5, 19.0, 19.3, 19.1]; // 单位：℃

  const option = {
    backgroundColor: "transparent",
    tooltip: { trigger: "axis" },
    legend: {
      data: ["水深", "水温"],
      top: "top",
      textStyle: { color: "#B5CFFF", fontSize: 14 },
    },
    grid: { left: 50, right: 40, top: 50, bottom: 20 },
    xAxis: {
      type: "category",
      data: xData,
      axisLine: { lineStyle: { color: "#B5CFFF" } },
      axisLabel: { color: "#B5CFFF", fontSize: 14 },
    },
    yAxis: [
      {
        type: "value",
        name: "水深(m)",
        min: 1.4,
        max: 1.6,
        interval: 0.05,
        nameTextStyle: { color: "#7EC0FF", fontSize: 14 },
        axisLabel: { color: "#7EC0FF", fontSize: 14 },
        splitLine: { lineStyle: { color: "rgba(126,192,255,0.15)" } },
      },
      {
        type: "value",
        name: "水温(℃)",
        min: 15,
        max: 25,
        interval: 2.5,
        nameTextStyle: { color: "#FFD36D", fontSize: 14 },
        axisLabel: { color: "#FFD36D", fontSize: 14 },
        splitLine: { show: false },
      },
    ],
    series: [
      {
        name: "水深",
        type: "bar",
        data: waterLevel,
        yAxisIndex: 0,
        barWidth: 14,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#7EC0FF" },
              { offset: 1, color: "rgba(126,192,255,0.2)" },
            ],
          },
          borderRadius: [6, 6, 0, 0],
        },
      },
      {
        name: "水温",
        type: "bar",
        data: waterTemp,
        yAxisIndex: 1,
        barWidth: 14,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#FFD36D" },
              { offset: 1, color: "rgba(255,211,109,0.2)" },
            ],
          },
          borderRadius: [6, 6, 0, 0],
        },
      },
    ],
  };

  return (
    <Box title={"水深智能检测"}>
        <ReactECharts
          option={option}
          style={{ width: "100%", height: "100%",minWidth:400,minHeight:240}}
        />
    </Box>
  );
}

export default WaterQualityCounting;
